<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>省市两级联动</title>
    <!--    引入本地js文件使用-->
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
      //绑定省下拉选择框, 内容改变触发
      $("#province").change(function(){
          //获取省选择的值
          var provinceValue = $("#province").val();
          if (provinceValue == 1) {
              var htmlStr = "<option value=\"1\">东城区</option>\n" +
                      "            <option value=\"2\">西城区</option>\n" +
                      "            <option value=\"3\">昌平区</option>\n" +
                      "            <option value=\"4\">朝阳区</option>\n" +
                      "            <option value=\"5\">密云区</option>";
              //给市下拉框赋值html显示的内容
              $("#city").html(htmlStr);
          } else {
              var htmlStr = "<option value=\"1\">沈阳市</option>\n" +
                      "            <option value=\"2\">大连市</option>\n" +
                      "            <option value=\"3\">葫芦岛市</option>\n" +
                      "            <option value=\"4\">盘锦市</option>";
              //给市下拉框赋值html显示的内容
              $("#city").html(htmlStr);
          }
      });


    });
    </script>
</head>
<body>
    省: <select id="province">
          <option value="0">=====请选择====</option>
          <option value="1">北京市</option>
          <option value="2">辽宁省</option>
      </select>
    市: <select id="city">
            <option value="0">=====请选择====</option>

      </select>
</body>
</html>